<!DOCTYPE html>
<html>
  <head>
    <title>选择题</title>
    <style>
      body {
        padding: 0 100px;
      }
      div {
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <h1>选择题</h1>
    <main id="main"></main>

    <button onclick="submitAnswers()">提交答案</button>

    <p id="score"></p>

    <script>
      function submitAnswers() {
        const tem = document.querySelectorAll('[type="radio" ]')
        console.log(tem)
      }
      const list = [
        {
          id: '001',
          titile: '在下列哪个选项中，typeof 返回的值为 "object"？',
          options: [
            { op: 'A', value: 'null' },
            { op: 'B', value: 'undefined' },
            { op: 'C', value: 'function' },
            { op: 'D', value: 'string' },
          ],
        },
        {
          id: '002',
          titile: '下列哪个方法可以用于删除一个对象的属性？',
          options: [
            { op: 'A', value: 'object.remove(property)' },
            { op: 'B', value: 'object.delete(property)' },
            { op: 'C', value: 'delete object.property' },
            { op: 'D', value: 'object.pop(property)' },
          ],
        },
        {
          id: '003',
          titile: '下列哪个方法可以用于在数组的末尾添加一个新元素？',
          options: [
            { op: 'A', value: 'array.add(newElement)' },
            { op: 'B', value: 'array.insert(newElement)' },
            { op: 'C', value: 'array.push(newElement)' },
            { op: 'D', value: 'array.unshift(newElement)' },
          ],
        },
      ]
      const answer = {
        '001': 'A',
        '002': 'C',
        '003': 'C',
      }
      const str = list
        .map((item) => {
          // console.log(item)
          const { id, options, titile } = item
          // const rem = item.id.titile
          console.log(options)
          return `
          <p>${id}.${titile} </p >
          ${options
            .map((item) => {
              // console.log(item)

              return `<input type="radio" name="num${id}"  id=""> ${item.op} 、${item.value}`
            })
            .join('')}

           `
        })
        .join('')
      document.querySelector('#main').innerHTML = str

      // document.querySelector('#main').innerHTML = res
      // console.log(str)
      // document.querySelector('list').addEventListener('click', function () {

      // })
    </script>
  </body>
</html>
